<template>
  <div class="shot-page-cont">
    <div class="video-cont">
      <div class="mask">

        <div ref="videoMask" class="video-mask">
          <div class="upper-left-corner"></div>
          <div class="upper-right-corner"></div>
          <div class="lower-left-corner"></div>
          <div class="lower-right-corner"></div>
        </div>
      </div>
      <video
        ref="video"
        playsinline
        webkit-playsinline="true"
        autoplay="true"
        muted="true"
        class="pic-video"
      >
      </video>
      <canvas v-show="false" ref="canvas" class="catch-pic"></canvas>
      <img v-show="false" ref="img" />
    </div>
    <div class="btn-cont">
      <div class="btn" @click="handleCommit" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      getUserMedia: {},
      vendorURL: ''
    }
  },
  mounted () {
    this.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia
    this.vendorURL = window.URL || window.webkitURL

    this.$nextTick(() => {
      this.handleTack()
    })
  },
  methods: {
    handleTack () {
      navigator.mediaDevices.getUserMedia(
        {
          video: { facingMode: 'environment' }, // 摄像头user: 前摄像头 environment:后摄像头
          audio: false // 音频
        }).then((stream) => {
        // alert('stream')
        // alert(stream)
        // _video.src = window.URL.createObjectURL(stream);
        // 判断兼容老写法
        const _video = this.$refs.video
        if ('srcObject' in _video) {
          _video.srcObject = stream
        } else {
          alert('window.URL.createObjectURL')
          _video.src = window.URL.createObjectURL(stream)
        }
        _video.onloadedmetadata = function (e) {
          _video.play()
        }
        _video.play()
      }).catch(err => {
        console.log('getUserMedia err :>> ', `拉取失败${err}`)
      })
    },
    // 点击确定
    handleCommit () {
      const [ _canvas, _img, _video, _videoMask ] = [this.$refs.canvas, this.$refs.img, this.$refs.video, this.$refs.videoMask]
      const top = _videoMask.offsetTop
      const left = _videoMask.offsetLeft
      const videoHeight = _video.offsetHeight
      const videoWidth = _video.offsetWidth
      _canvas.getContext('2d').drawImage(_video, left / 3.5, top / 200, videoHeight * 5, videoWidth * 6, 0, 0, videoHeight * 2.8, videoWidth * 1.87)
      // _img.src = _canvas.toDataURL('image/png')

      this.$router.push({
        path: `/mobile?imgSrc=${_img.src}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.shot-page-cont {
  // box-sizing: content-box;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .video-cont {
    position: relative;
    flex: 1;
    // 相机实时画面
    .pic-video {
      height: 100%;
      width: 100%;
      object-fit:cover;
    }
    .video-mask {
      position: absolute;
      width: 600px;
      height: 948px;
      background-color: rgba(255, 255, 255, 0.1);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      div[class$="-corner"] {
        position: absolute;
        border-style: solid;
        border-width: 8px;
        border-color: aquamarine transparent transparent aquamarine;
      }
      .upper-left-corner {
        left: 0;
        width: 150px;
        top: 0;
        height: 150px;
      }
      .upper-right-corner {
        right: -0;
        width: 150px;
        top: 0;
        height: 150px;
        transform: rotate(90deg);
      }
      .lower-left-corner {
        left: 0;
        width: 150px;
        bottom: 0;
        height: 150px;
        transform: rotate(-90deg);
      }
      .lower-right-corner {
        right: 0;
        width: 150px;
        bottom: 0;
        height: 150px;
        transform: rotate(180deg);
      }
    }
  }

  .catch-pic {
    position: absolute;
    width: 600px;
    height: 948px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .btn-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #000;
    height: 20%;

    .btn {
      position: relative;
      width: 140px;
      height: 140px;
      background-color: #fff;
      border-radius: 50%;

      &::before,
      &::after {
        content: '';
        display: inline-block;
        width: 130px;
        height: 130px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      &::after {
        width: 110px;
        height: 110px;
        background-color: #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
